<template>
	<!-- <el-dialog
        :visible.sync="visible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        :title="title + '-' + compTitle"
        fullscreen
    > -->
	<div class="data-filter-comp">
		<!-- <div>{{ filter.contents }}</div> -->
		<div class="content">
			<div class="filterArea">
				<div class="row">
					<span class="label">开启过滤器</span>
					<avue-switch size="mini" type="textarea" v-model="filter.open"></avue-switch>
				</div>
				<div class="row">
					<span class="label last">选择过滤器</span>
					<el-select size="mini" v-model="filter.tags" multiple clearable collapse-tags style="margin-left: 20px" placeholder="请选择">
						<el-option v-for="item in filter.contents" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
					<el-button size="mini" type="primary" icon="el-icon-plus" @click="addFilter"></el-button>
				</div>
				<div class="data-filter-list" v-for="(item, index) in filter.contents" :key="index" :class="{ hide: item.hide }">
					<div class="head">
						<i class="el-icon-menu"></i>
						<el-input size="mini" v-model="item.label" placeholder="请输入过滤器名称"></el-input>
						<i class="el-icon-delete" @click="handleDelete(item, index)"></i>
						<i class="el-icon-arrow-down" @click="handleToggle(item, index)"></i>
					</div>
					<div class="detail">
						<div class="detail-inner">
							<div class="inner"></div>
							<div class="code">
								<monaco-editor class="" :height="250" language="javascript" v-model="item.code"></monaco-editor>
							</div>
							<div class="btn-list">
								<el-button size="mini" type="primary" @click="testFilter(item, index)">测试</el-button>
								<div>
									<el-button size="mini">取消</el-button>
									<el-button size="mini" type="primary">保存</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<!-- <el-button size="mini" @click="setVisible(false)">取 消</el-button> -->
			<el-button type="primary" @click="submit" size="mini">确 定</el-button>
		</span>

		<div class="data-test-result" v-if="isTest">
			<div class="data-test-result-head">
				<div class="data-test-result-title">测试结果</div>
				<div data-v-fa464ecc="" class="data-test-result-close">
					<i aria-hidden="true" class="kpiconfont kp-title-close big"></i>
				</div>
			</div>
			<div class="data-test-result-inner">
				<div class="data-test-result-input">
					<div class="data-test-result-desc">输入数据</div>
					<div class="code">
						<monaco-editor class="dataTransform111" :height="400" v-model="tip" language="json"></monaco-editor>
					</div>
				</div>
				<div class="data-test-result-output">
					<div class="data-test-result-filter">过滤器运行结果</div>
					<!-- {{ result }} -->
					<div class="code">
						<monaco-editor class="dataTransform111" :height="400" v-model="result" language="json"></monaco-editor>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- </el-dialog> -->
</template>

<script>
import { tip } from '@/config';
import { funEval, uuid } from '@/utils/utils';
import MonacoEditor from '@/page/components/editor';
import { website } from '../../config';
export default {
	components: { MonacoEditor },
	data() {
		return {
			isTest: false,
			tip: '',
			result: '',
			filter: {
				open: false,
				contents: [],
				tags: []
			}
		};
	},
	props: {
		visible: Boolean,
		type: String,
		value: [String, Object, Array],
		compTitle: String,
		title: {
			type: String,
			default: '数据转换器'
		}
	},
	watch: {
		// 数据过滤函数集合
		value: {
			handler(val) {
				if (this.validatenull(val)) {
					//                     if (
					//                         ["dataFormatter"].includes(this.type) &&
					//                         this.validatenull(val)
					//                     ) {
					//                         this.code = `function(data,params,refs){
					//    return {}
					// }`;
					//                     }
				} else {
					console.log('val', val);
					this.filter.tags = val.map(v => v.value);
					this.filter.contents = val.map(v => {
						return {
							...v,
							hide: true,
							code: v.code.toString()
						};
					});
					console.log('this.filter.contents', this.filter.contents);
				}
			},
			immediate: true,
			deep: true
		}
	},
	created() {
		this.tip = JSON.stringify(tip[this.compTitle], null, 4);
	},
	methods: {
		handleClose() {
			this.setVisible(false);
		},
		submit() {
			let value = this.code;
			try {
				let base = `function(data,params,refs){return {}}`;
				if (!['dataFormatter'].includes(this.type)) {
					funEval(value);
				}
				if (['data'].includes(this.type)) value = funEval(value);

				if (['dataFormatter'].includes(this.type)) {
					let fns = [];
					this.filter.contents
						.filter(cont => {
							return this.filter.tags.includes(cont.value);
						})
						.map(c =>
							fns.push({
								hide: true,
								// code: funEval(c.code),
								code: c.code,
								label: c.label,
								value: c.value
							})
						);
					this.$emit('submit', fns);
				} else {
					this.$emit('submit', value);
				}
				this.setVisible(false);
			} catch (error) {
				console.log(error);
				this.$message.error('数据格式有误');
			}
		},
		setVisible(val) {
			this.$emit('update:visible', val);
		},
		// 过滤器
		addFilter() {
			this.filter.contents.push({
				hide: true,
				label: '过滤器',
				value: uuid(),
				code: `function filter(data,params){
    return data;
}`
			});
		},
		handleDelete(item, index) {
			this.filter.contents.splice(index, 1);
		},
		handleToggle(item, index) {
			if (!item.hide) {
				this.$set(this.filter.contents[index], 'hide', true);
			} else {
				this.$set(this.filter.contents[index], 'hide', false);
			}
			console.log('index', index);
		},
		testFilter(item, index) {
			console.log('this.filter', this.filter);
			let testFn = funEval(item.code);
			let params = JSON.parse(this.tip);
			if (!this.isTest) {
				this.isTest = true;
			}
			let result = testFn(params);
			this.$nextTick(() => {
				this.result = result;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.data-filter-comp {
	padding: 10px;
	// position: relative;
	.content {
		margin-bottom: 10px;
		// display: flex;
		// justify-content: space-between;
		.monaco_editor_container {
			flex: 1;
			&:first-child {
				flex: 2;
			}
		}
		.filterArea {
			width: 100%;
			box-sizing: border-box;
			overflow-y: auto;
			background-color: #1b1c1f;
			.row {
				display: flex;
				align-items: center;
				margin-bottom: 12px;
				.label {
					color: #fff;
					white-space: nowrap;
					margin-right: 15px;
					font-size: 14px;
					&.last {
						margin-right: 0;
					}
				}
			}
			.data-filter-list {
				border: 1px solid hsla(0, 0%, 100%, 0.08);
				border-radius: 4px;
				margin-top: 12px;
				padding: 12px;
				box-sizing: border-box;
				&:first-child {
					margin-top: 0;
				}
				&.hide {
					.detail {
						grid-template-rows: 0fr;
					}
					.head {
						i {
							&.el-icon-arrow-down {
								transform: rotate(-90deg);
								transition: transform 0.3s linear;
							}
						}
					}
				}
				.head {
					padding-left: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: #282a2e;
					.el-input {
						flex: 1;
						margin-right: 10px;
					}
					i {
						font-size: 16px;
						margin-right: 10px;
						color: #fff;
						&.el-icon-arrow-down {
							cursor: pointer;
							transform: rotate(0deg);
							transition: transform 0.3s linear;
						}
						&.el-icon-delete {
							cursor: pointer;
						}
					}
				}
				.detail {
					display: grid;
					grid-template-rows: 1fr;
					transition: grid-template-rows 0.3s linear;
					.detail-inner {
						overflow: hidden;
						.inner {
							margin-top: 10px;
						}
						.code {
							box-sizing: border-box;
							border: 1px solid #282f3a;
						}
						.btn-list {
							margin-top: 10px;
							display: flex;
							justify-content: space-between;
							.el-button--primary {
								background-color: transparent;
								color: #2681ff;
								border-color: #2681ff;
								border-radius: 4px;
								&:hover,
								&:focus {
									color: #fff;
									background-color: #1f87ff;
									border-color: #4f9eff;
								}
							}
							.el-button--default {
								border-radius: 4px;
								border: none;
								background-color: #303338;
								color: hsla(0, 0%, 100%, 0.7);
								&:hover,
								&:focus {
									background-color: #404347;
								}
							}
						}
					}
				}
			}
		}
	}
	.data-test-result {
		position: fixed;
		top: 0;
		right: 350px;
		background-color: #1b1c1f;
		width: 350px;
		height: 100%;
		&-head {
			padding: 10px;
			height: 43px;
			box-sizing: border-box;
			background-color: #242629;
			.data-test-result-title {
				color: #fff;
			}
		}
		&-inner {
			padding: 8px;
			.data-test-result-desc {
				font-size: 14px;
				color: #fff;
				padding-bottom: 5px;
			}
			.data-test-result-filter {
				font-size: 14px;
				color: #fff;
				padding: 5px 0;
			}
			.code {
				border: 1px solid #282f3a;
			}
		}
	}
}
</style>
